<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 投票列表 </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button type="primary" icon="el-icon-delete" class="handle-del mr10" @click="addVote()">发起新投票 </el-button>
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
        <el-table-column prop="name" label="标题" align="center">
          <template slot-scope="scope">{{ scope.row.title }}</template>
        </el-table-column>
        <el-table-column prop="description" label="状态" width="80" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '0'" type="success">进行中</el-tag>
            <el-tag v-if="scope.row.status === '1'" type="warning">已取消</el-tag>
            <el-tag v-if="scope.row.status === '2'" type="danger">已结束</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="发布者" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.manager.name }}</template>
        </el-table-column>
        <el-table-column prop="description" label="发布时间" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.startTime }}</template>
        </el-table-column>
        <el-table-column prop="description" label="截止时间" width="180" align="center">
          <template slot-scope="scope">{{ scope.row.endTime }}</template>
        </el-table-column>

        <!-- <el-table-column prop="date" label="注册时间"></el-table-column> -->
        <el-table-column label="操作" width="140" align="center">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-remove-outline" class="blue"
              @click="handleCancle(scope.$index, scope.row)" v-if="scope.row.status === '0'">取消
            </el-button>
            <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
          :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchData } from '../../api/index';
export default {
  name: 'basetable',
  data() {
    return {
      //列表数据
      query: {
        // address: '',
        // name: '',
        pageIndex: 0,
        pageSize: 0
      },
      page: {},
      tableData: [],
      // multipleSelection: [],
      // delList: [],
      // editVisible: false,
      // addVisible: false,
      pageTotal: 0,
      form: {},
      role: {
        name: '',
        description: '',
        status: ''
      },
      idx: -1,
      id: -1
    };
  },
  created() {
    //this.getData();
    let token = localStorage.getItem('token');
    this.$axios.get('/vote/admin/getVotes/1/1').then((r) => {
      console.log(r.data.data);
      this.tableData = r.data.data.records;
      this.pageTotal = r.data.data.total;
      this.query.pageIndex = r.data.data.current;
      this.query.pageSize = r.data.data.size;
    });
  },
  methods: {
    // 获取 easy-mock 的模拟数据
    // getData() {
    //     fetchData(this.query).then(res => {
    //         console.log(res);
    //         this.tableData = res.list;
    //         this.pageTotal = res.pageTotal || 50;
    //     });
    // },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, 'pageIndex', 1);
      this.getData();
    },
    //取消投票
    handleCancle(index, row) {
      // 二次确认删除
      this.$confirm('确定要取消该投票？', '提示', {
        type: 'warning'
      })
        .then(() => {
          row.status = '1';
          this.$axios.put('/vote/admin/cancelVote/' + row.id).then((r) => {
            if (r.data.code == 200) {
              this.$message.success('已取消');
              // this.tableData.splice(index, 1);
            }
          });
        })
        .catch(() => { });
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm('确定要删除该投票？', '提示', {
        type: 'warning'
      })
        .then(() => {
          if(row.status==='0'){
            this.$message.error('请先取消投票或等待投票结束');
          }else{
            this.$axios.delete('/vote/admin/deletelVote/' + row.id).then((r) => {
            if (r.data.code == 200) {
              this.$message.success('删除成功');
              this.tableData.splice(index, 1);
            }
          });
          }
        })
        .catch(() => { });
    },
    //跳转到新增投票
    addVote() {
      this.$router.push({path:"/voteAdd"})
     },
    // 分页导航
    handlePageChange(currentPage) {
      this.$axios.get('vote/admin/getVotes/1/' + currentPage).then((r) => {
        this.tableData = r.data.data.records;
        this.pageTotal = r.data.data.total;
        this.query.pageIndex = r.data.data.current;
        this.query.pageSize = r.data.data.size;
      });
    }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
